<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 样式重置 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/normalize/8.0.1/normalize.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/elui-index.css">
  <!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=3LhvI2G6IyAIbQc6w78xY7C83PTjc5Ow"></script> -->
  <!-- 腾讯地图 -->
  <script src="https://map.qq.com/api/js?v=2.exp&key=NDUBZ-3BZKI-RWJGW-52SDN-DX347-J3F2L"></script>
  <script charset="utf-8" type="text/javascript"
    src="https://map.qq.com/api/js?v=2.exp&key=NDUBZ-3BZKI-RWJGW-52SDN-DX347-J3F2L&libraries=place"></script>
  <title>添加景点</title>
  <style>
    .setBaseStyle,
    .setDayStyle {
      width: 100%;
      box-sizing: border-box;
      margin-top: 10px;
      border: 1px solid saddlebrown;
    }
  </style>
</head>

<body>
  <div id="LsApp">
    <div class="left" style="width: 20%;">
      <!-- @transmit-draggable-left-pointdata="transmitDraggableLeftPointdata" -->
      <!-- <left-comp :point="point" :main-option="mainOption" :point-in-resource-data="pointInResourceData"
        @transmit-leftcompdata="transmitLeftCompData"
        @transmit-draggable-left-pointdata="transmitDraggableLeftPointdata" :cropper-option-data="cropperOptionData">
      </left-comp> -->
    </div>
    <div class="mid" style="padding-bottom: 100px;width:50%">
      <div class="setBaseStyle">
        <base-info :form-confirm="formConfirmNum" ref="baseInfoForm" :base-info-form="baseInfoForm"
          :base-info-cropper-option="cropperOptionData" @scroll-more="scrollMore" @remote-method="remoteMethod" :main-option="mainOption">
        </base-info>
      </div>
      <div class="setDayStyle">
        <point-comp :point="point" :main-option="mainOption" :day-comp-cropper-option="cropperOptionData"
          :point-in-resource-data="pointInResourceData" ref="pointCompForm" :name="name" @change-data='changeData'>
        </point-comp>
      </div>
      <el-button type="warning" size="mini" @click="confirm" v-if="mainOption.operate==='show'?false:true">提交</el-button>
    </div>
    <div class="right" style="width: 30%;">
      <div class="phone-simulator">
        <simulator :point="point" :base-info-data="baseInfoForm.baseInfoData"></simulator>
      </div>
    </div>
  </div>
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <script src="./plugin//axios.min.js"></script>
  <!-- 上线替换vue.min.js -->
  <script src="./plugin/vue.js"></script>
  <!-- 拖拽包 -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script> -->
  <script src="./plugin/vuedraggable.min.js"></script>
  <!-- vue图片裁剪 -->
  <!-- <script src="./plugin/vueCropper.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.min.js"></script>
  <!-- element -->
  <script src="./plugin/elui-index.js"></script>
  <script src="./plugin/httpVueLoader.js"></script>
  <script src="./plugin/better-scroll.min.js"></script>
  <script src="./plugin/cos-js-sdk-v5.min.js"></script>
  <script>
    var author = 'create'
    var tagTypeFn = () => {
      const arr = ['', 'success', 'info', 'warning', 'danger']
      const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
      return arr[RandomNum(0, 4)]
    }
    var checkTag = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('tag不能为空'));
      } else if (value.length > 8) {
        callback(new Error('不能超过8个字符'))
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length > 8) {
        callback(new Error('太长'));
      } else {
        callback()
      }
    };
    // 表单验证函数
    function allCheckRules(that, formName, index) {
      let result;
      result = new Promise((resolve, reject) => {
        if (index) {
          that.$refs[formName][0].validate(valid => {
            if (valid) {
              resolve();
            } else {
              reject();
            }
          });
        } else {
          that.$refs[formName].validate(valid => {
            if (valid) {
              resolve();
            } else {
              reject();
            }
          });
        }
      });
      return result;
    }
    // axios请求
    function http(url, method, data) {
      return new Promise((res, rej) => {
        axios({
          url,
          method,
          data
        })
          .then(pos => res(pos))
          .catch(err => rej(err));
      });
    }
    var Bucket = '';
    var Region = '';
    var config = {
      // url: 'https://newplay-leader.trip.wlkst.com/admin/'
      url: 'https://wl.fangkeng.wang/'
      // url: 'http://test-newplay.trip.wlkst.com'
    }
    // 初始化COS上传图片
    var cos = new COS({
      getAuthorization: (options, callback) => {
        http(config.url + 'admin/cosv5', "GET", {}).then((pos) => {
          const data = pos.data
          callback({
            TmpSecretId: data.credentials && data.credentials.tmpSecretId,
            TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
            XCosSecurityToken: data.credentials && data.credentials.sessionToken,
            ExpiredTime: data.expiredTime,
          });
        }).catch(err => console.log(err))
      }
    });
    var app = new Vue({
      el: '#LsApp',
      data: {
        formData:
        { "title": "景点101", "scenic_spot_id": 1, "scenic_spot_id_obj": { "id": 1, "title": "白马山景区", "disabled": false }, "summary": "阿斯顿发景点简景点简景点简景点简景点简", "address": "地址地址地址地址地址", "thumb": "https://sun-1253313441.cos.ap-chengdu.myqcloud.com/images/1569392623519", "tag": [ "d1", "阿萨德·" ], "phone": 203113030, "sort": 4, "longitude": 106.54772, "latitude": 29.42844, "mp3_path": "https://static.trip.wlkst.com/files/a87d563922560de102372cd244fe34c2.mp3", "mp3_path_obj": { "id": 24, "title": "天生三桥音频", "file_url": "https://static.trip.wlkst.com/files/a87d563922560de102372cd244fe34c2.mp3", "disabled": false }, "mp3_path_remark": "音频备注音频备注", "video_path": "https://static.trip.wlkst.com/files/big_buck_bunny.mp4", "video_path_obj": { "id": 3, "title": "新视频", "file_url": "https://static.trip.wlkst.com/files/big_buck_bunny.mp4", "disabled": false }, "rtmp_path": "慢直播地址慢直播地址慢直播地址", "state": 0, "ticket": [ { "id": 14, "title": "芙蓉洞含索道当日票", "thumb": "https://static.trip.wlkst.com/ticket/dashboard/201908/19/1566207841_OmIYDxAYLh.jpg", "disabled": false } ], "content": [ { "imgList": { "url": "https://sun-1253313441.cos.ap-chengdu.myqcloud.com/images/1569393378400" }, "type": "img", "IsDel": false }, { "val": "阿萨德", "type": "text", "IsDel": false },{ "imgList": { "url": "https://sun-1253313441.cos.ap-chengdu.myqcloud.com/images/1569398263222" }, "type": "img", "IsDel": false }  ] },
        name: 'scenic',
        mainOption: {
          operate: 'scenic',
          // summary: '',
          // summaryMax: 200,
          tiOption: {
            // title: '',
            titleMax: 50,
            content: [],
            // resources: [],
          },
          // 全局输入的配置
          globalOptionText: {
            contentTextMax: 200,
            autosize: {
              minRows: 2,
              maxRows: 10
            }
          },
        },
        // point里的资源数据
        pointInResourceData: [],
        // 资源是否必填
        rulesResource: [
          { required: false, message: "请选择资源", trigger: "blur", type: "array" }
        ],
        // 全局img的配置
        cropperOptionData: {
          img: "",
          size: 1,
          full: false,
          outputType: "png",
          canMove: true,
          // fixedBox为true就不能改变裁剪框
          fixedBox: false,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 400,
          autoCropHeight: 350,
          centerBox: false,
          high: true
        },
        // 全局text的配置
        optionText: {
          // 字数
          max: 50,
          autosize: {
            minRows: 2,
            maxRows: 10
          }
        },
        // 当前天的index
        dayIndex: 0,
        pushPointState: false,
        // day的数据
        // day: [],
        point: [],
        formConfirmNum: 0,
        // 所属景区的页码
        inAttributeScenicPage: 1,
        // baseinfo 的表单和值
        baseInfoForm: {
          baseInfoData: [
            {
              label: "景点名称",
              rules: [
                { required: true, message: "请输入景点名称", trigger: "blur" }
              ],
              val: "",
              solt: false,
              type: "input",
              option: { max: "45" },
              placeholder: "输入景点名称"
            },
            {
              label: "所属景区",
              rules: [
                { required: true, message: "请选择所属景区", trigger: "blur" }
              ],
              val: '',
              solt: false,
              type: "radioOption",
              data: [],
              searchArr: [],
              placeholder: "请输入所属景区关键词",
              name: 'attributeScenic',
              currentIndex: 1,
              searchIndex: 1,
              nowQuery: ''
            },
            {
              label: "景点简介",
              rules: [
                { required: true, message: "请输入景点简介", trigger: "blur" }
              ],
              val: "",
              solt: false,
              type: "areaInput",
              option: {
                max: "500"
              },
              placeholder: "请输入景点简介"
            },
            {
              label: "地址",
              rules: [
                { required: true, message: "请输入地址", trigger: "blur" }
              ],
              val: "",
              solt: false,
              type: "input",
              option: { max: "80" },
              placeholder: "请输入地址"
            },
            {
              label: "头图",
              rules: [{ required: true, message: "请添加头图", trigger: "blur" }],
              solt: true,
              val: "",
              type: "button",
              buttonText: "浏览"
            },
            {
              label: "标签",
              // rules: [{ required: true, message: "请输入标签", trigger: "blur" }],
              rules: [{ validator: checkTag, trigger: 'blur', required: true }],
              val: [],
              solt: false,
              tagType: tagTypeFn(),
              type: "tag",
              // v-model
              vm: "",
              TagInputVisible: false,
              tagText: "+ New Tag",
              placeholder: "输入标签(1-8)个字符"
            },
            {
              label: "电话",
              rules: [
                { required: false, message: "请输入电话", trigger: "blur" },
                // { type: 'number', message: '电话必须为数字值'}
              ],
              val: "",
              solt: false,
              type: "numberInput",
              option: { max: "15" },
              placeholder: "请输入电话"
            },
            {
              label: "排序(0~1000)",
              rules: [],
              val: "",
              solt: false,
              type: "number",
              option: {
                // 保留小数
                precision: 0,
                // 每次加1
                step: 1
              }
            },
            {
              label: "景点坐标",
              rules: [{ required: true, message: "请选择景点坐标", trigger: "blur" }],
              val: "武陵区人民政府",
              solt: false,
              type: "map",
              option: {
                latitude: 29.325491865412,
                longitude: 107.75971415453
              },
              placeholder: "请输入地点关键词",
              // 市名
              region: '重庆',
              // 检索条数
              pageCapacity: 10
            },
            {
              label: "音频地址",
              rules: [
                { required: false, message: "请输入音频地址", trigger: "blur" }
              ],
              val: '',
              type: 'radioOption',
              data: [],
              searchArr: [],
              changeIf: 'audio',
              placeholder: "请输入音频地址关键词",
              name: 'audioPos',
              currentIndex: 1,
              searchIndex: 1,
              nowQuery: ''
            },
            {
              label: "音频备注",
              rules: [
                { required: false, message: "请输入音频备注", trigger: "blur" }
              ],
              val: "",
              solt: false,
              type: "input",
              option: { max: "45" },
              placeholder: "请输入音频备注"
            },
            {
              label: "视频地址",
              rules: [
                { required: false, message: "请输入视频地址", trigger: "blur" }
              ],
              val: '',
              type: 'radioOption',
              data: [],
              searchArr: [],
              changeIf: 'video',
              placeholder: "请输入视频地址关键词",
              name: 'videoPos',
              currentIndex: 1,
              searchIndex: 1,
              nowQuery: ''
            },
            {
              label: "慢直播地址",
              rules: [
                { required: false, message: "请输入慢直播地址", trigger: "blur" }
              ],
              val: "",
              solt: false,
              type: "input",
              option: { max: "45" },
              placeholder: "请输入慢直播地址"
            },
            {
              label: "发布",
              rules: [],
              val: true,
              solt: false,
              type: "bool"
            },
            {
              label: "关联门票",
              rules: [
                { required: false, message: "请选择关联门票", trigger: "blur" }
              ],
              val: [],
              type: 'option',
              data: [],
              searchArr: [],
              changeIf: 'ticket',
              placeholder: "请输入关联门票关键词",
              name: 'correlationTicket',
              currentIndex: 1,
              searchIndex: 1,
              nowQuery: ''
            }
          ]
        },
      },
      components: {
        'left-comp': httpVueLoader('./components/scenicLeft.vue'),
        'baseInfo': httpVueLoader('./components/baseInfo.vue'),
        'point-comp': httpVueLoader('./components/scenicContent.vue'),
        'simulator': httpVueLoader('./components/simulator/scenicSimulator.vue')
      },
      created() {
        const that = this
        this.inAttributeScenicList('', 10, 1)
        this.getAudioPos('', 10, 1)
        this.getVideoPos('', 10, 1)
        this.getCorrelationTicket('', 10, 1)
        if (author === 'create') {
          // 新增
          this.mainOption.operate = 'create'
        } else if (author === 'edit') {
          this.mainOption.operate = 'edit'
          // 修改
          this.userOperate()
        } else {
          // 查看
          this.mainOption.operate = 'show'
          this.userOperate()
        }
      },
      methods: {
        userOperate() {
          let data = this.formData
          let baseData = this.baseInfoForm.baseInfoData
          baseData[4].val = data.thumb
          baseData[0].val = data.title
          baseData[1].val = data.scenic_spot_id_obj
          baseData[5].val = data.tag
          baseData[5].vm = 'a'
          baseData[6].val = data.phone
          // data.address = baseData[8].val
          baseData[3].val = data.address
          this.point = data.content
          baseData[9].val = {}
          baseData[9].val = data.mp3_path_obj
          baseData[8].option.longitude = data.longitude
          baseData[8].option.latitude = data.latitude
          baseData[8].val = data.address
          baseData[12].val = data.rtmp_path
          baseData[10].val = data.mp3_path_remark
          baseData[11].val = data.video_path_obj
          baseData[2].val = data.summary
          baseData[1].val.id = data.scenic_spot_id
          baseData[7].val = data.sort
          baseData[13].val =  data.state === 10?true:false
          baseData[14].val = data.ticket
        },
        unique(arr) {
          const res = new Map();
          return arr.filter(arr => !res.has(arr.id) && res.set(arr.id, 1));
        },
        remoteMethod(obj) {
          if (obj.name === 'attributeScenic') {
            this.baseInfoForm.baseInfoData[1].searchIndex = 1;
            this.baseInfoForm.baseInfoData[1].searchArr = this.baseInfoForm.baseInfoData[1].val ? [this.baseInfoForm.baseInfoData[1].val] : [];
            this.baseInfoForm.baseInfoData[1].nowQuery = obj.query
            obj.query && this.inAttributeScenicList(obj.query, 10, this.baseInfoForm.baseInfoData[1].searchIndex, 'search')
            // const count = ++this.baseInfoForm.baseInfoData[1].currentIndex
            // obj.query && this.inAttributeScenicList(obj.query, 10, 1)
          } else if (obj.name === 'audioPos') {
            this.baseInfoForm.baseInfoData[9].searchIndex = 1;
            this.baseInfoForm.baseInfoData[9].searchArr = this.baseInfoForm.baseInfoData[9].val ? [this.baseInfoForm.baseInfoData[9].val] : [];
            this.baseInfoForm.baseInfoData[9].nowQuery = obj.query
            obj.query && this.getAudioPos(obj.query, 10, this.baseInfoForm.baseInfoData[9].searchIndex, 'search')
          } else if (obj.name === 'videoPos') {
            this.baseInfoForm.baseInfoData[11].searchIndex = 1;
            this.baseInfoForm.baseInfoData[11].searchArr = this.baseInfoForm.baseInfoData[11].val ? [this.baseInfoForm.baseInfoData[11].val] : [];
            console.log(this.baseInfoForm.baseInfoData[11].searchArr, 'this.baseInfoForm.baseInfoData[11].searchArr')
            this.baseInfoForm.baseInfoData[11].nowQuery = obj.query
            obj.query && this.getVideoPos(obj.query, 10, this.baseInfoForm.baseInfoData[11].searchIndex, 'search')
          } else {
            this.baseInfoForm.baseInfoData[14].searchIndex = 1;
            this.baseInfoForm.baseInfoData[14].searchArr = this.baseInfoForm.baseInfoData[14].val.concat([]);
            this.baseInfoForm.baseInfoData[14].nowQuery = obj.query
            // const count = ++this.baseInfoForm.baseInfoData[14].currentIndex
            obj.query && this.getCorrelationTicket(obj.query, 10, this.baseInfoForm.baseInfoData[14].searchIndex, 'search')
          }
        },
        // 加载更多
        scrollMore(name) {
          if (name === 'attributeScenic') {
            const nowQuery = this.baseInfoForm.baseInfoData[1].nowQuery
            const count = nowQuery ? ++this.baseInfoForm.baseInfoData[1].searchIndex : ++this.baseInfoForm.baseInfoData[1].currentIndex
            // const count = ++this.baseInfoForm.baseInfoData[1].currentIndex
            this.inAttributeScenicList(nowQuery, 10, count)
          } else if (name === 'audioPos') {
            const nowQuery = this.baseInfoForm.baseInfoData[9].nowQuery
            const count = nowQuery ? ++this.baseInfoForm.baseInfoData[9].searchIndex : ++this.baseInfoForm.baseInfoData[9].currentIndex
            // const count = ++this.baseInfoForm.baseInfoData[9].currentIndex
            this.getAudioPos(nowQuery, 10, count)
          } else if (name === 'videoPos') {
            const nowQuery = this.baseInfoForm.baseInfoData[11].nowQuery
            const count = nowQuery ? ++this.baseInfoForm.baseInfoData[11].searchIndex : ++this.baseInfoForm.baseInfoData[11].currentIndex
            // const count = ++this.baseInfoForm.baseInfoData[11].currentIndex
            this.getVideoPos(nowQuery, 10, count)
          } else {
            const nowQuery = this.baseInfoForm.baseInfoData[14].nowQuery
            const count = nowQuery ? ++this.baseInfoForm.baseInfoData[14].searchIndex : ++this.baseInfoForm.baseInfoData[14].currentIndex
            // const count = ++this.baseInfoForm.baseInfoData[13].currentIndex
            this.getCorrelationTicket(nowQuery, 10, count)
          }
        },
        // 获取关联门票
        getCorrelationTicket(search, page_size, page, isSearch) {
          // 13数组代表索引
          this.getListHttp('api/v1/getResource', "POST", { search, page_size, page, type: 3 }, 14, isSearch)
          // this.getListHttp('api/v1/test', "POST", { search, page_size, page, type: 3 }, 13, isSearch)
        },
        // 获取视频地址
        getVideoPos(search, page_size, page, isSearch) {
          this.getListHttp('api/v1/getMp4Url', "POST", { search, page_size, page }, 11, isSearch)
          // this.getListHttp('api/v1/test', "POST", { search, page_size, page }, 11, isSearch)
        },
        // 获取音频地址
        getAudioPos(search, page_size, page, isSearch) {
          this.getListHttp('api/v1/getMp3Url', "POST", { search, page_size, page }, 9, isSearch)
          // this.getListHttp('api/v1/test', "POST", { search, page_size, page }, 9, isSearch)
        },
        // 景点获取所属景区
        inAttributeScenicList(search, page_size, page, isSearch) {
          this.getListHttp('api/v1/getScenicSpot', "POST", { search, page_size, page }, 1, isSearch)
          // this.getListHttp('api/v1/test', "POST", { search, page_size, page }, 1, isSearch)
        },
        getListHttp(strUrl, methods, objData, index, search) {
          const that = this
          http(config.url + strUrl, methods, objData).then(pos => {
            const list = pos.data.data
            list.data.map((item, index) => {
              item.disabled = false
            })
            if (search) {
              if (objData.page <= list.last_page) {
                that.baseInfoForm.baseInfoData[index].searchArr = this.unique(this.baseInfoForm.baseInfoData[index].searchArr.concat(list.data))
              }
            } else {
              if (objData.page <= list.last_page) {
                that.baseInfoForm.baseInfoData[index].data = this.unique(this.baseInfoForm.baseInfoData[index].data.concat(list.data))
              }
            }
            console.log(pos)
          }).catch(err => {
            console.log(err, 'err')
          })
        },
        changeData(changeData) {
          this.point = changeData
        },
        transmitDraggableLeftPointdata(obj) {
          this.point = obj.dataNewPoint
        },
        tagTypeFn() {
          const arr = ['', 'success', 'info', 'warning', 'danger']
          const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
          return arr[RandomNum(0, 4)]
        },
        // left的天拖拽后的数据
        transmitDraggableLeftDayData(obj) {
          this.day = obj.dataNewDay
        },
        // left point传来的数据
        transmitLeftCompData(data) {
          this.point.push(data.obj)
        },
        pushPointStateYY() {
          this.pushPointState = true
        },
        transmitDayCollapseChange(activeName) {
          this.activeName = activeName
        },
        // 添加游玩点
        transmitAddPoint(dayIndex) {
          const obj = {
            pointTitle: '', playTime: 1.0, content: [], correlationResource: [],
            option: { max: 20 }, rules: [{ required: true, message: "请输入标题", trigger: "blur" }]
          }
          // this.day[dayIndex].point.push(obj)
        },
        confirm() {
          // this.formConfirmNum++
          let arr = []
          let that = this
          let baseForm = this.$refs.baseInfoForm.runFormConfirm()
          // let pointForm = this.$refs.pointCompForm.runDayForm()
          arr.push(baseForm)

          // arr.concat(pointForm)
          Promise.all(arr)
            .then(() => {
              //都通过了
              console.log("yyes");
              let data = {}
              let baseData = this.baseInfoForm.baseInfoData
              let point = that.point
              
              data.title = baseData[0].val
              data.scenic_spot_id = baseData[1].val.id
              data.scenic_spot_id_obj = baseData[1].val
              data.summary = baseData[2].val
              data.address = baseData[3].val
              // data.address = baseData[8].val
              data.thumb = baseData[4].val
              data.tag = baseData[5].val
              data.phone = baseData[6].val
              data.sort = baseData[7].val
              data.longitude = baseData[8].option.longitude
              data.latitude = baseData[8].option.latitude
              data.mp3_path = baseData[9].val && baseData[9].val.file_url
              data.mp3_path_obj = baseData[9].val
              data.mp3_path_remark = baseData[10].val
              data.video_path = baseData[11].val && baseData[11].val.file_url
              data.video_path_obj = baseData[11].val
              data.rtmp_path = baseData[12].val
              data.state = baseData[13].val ? 10 : 0
              data.ticket = baseData[14].val
              data.content = point
              this.formData = data
              http(config.url + 'api/v1/scenicUpdateOrCreate', 'POST', data).then(pos => {
                console.log(pos, 'pos confirm')
                const code = pos.data.code
                if (code === 0) {
                  this.$message({ message: "上传成功", type: "success" });
                } else {
                  this.$message({ message: "上传失败", type: "error" });
                }
              }).catch(err => {
                console.log(err, 'err confirm')
              })
            })
            .catch(err => {
              this.$message({ message: "请填写完整信息", type: "warning" });
              console.log("err");
            });
        },
      }
    })


    const selectDown = Vue.directive('loadmore', {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', function () {

          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (CONDITION) {
            binding.value()
          }
        })
      }
    })
    Vue.use(selectDown)



  </script>
</body>

</html>